<template>
  <v-data-table
    :headers="headers"
    :search="search"
    :items="user"
    sort-by="NICK_NAME"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar
        flat
      >
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="查找..."
          single-line
          hide-details
        ></v-text-field>
      </v-toolbar>
    </template>
    <template v-slot:item.AUTH="{ item }">
      <v-menu
        v-model="item.menuShow"
        bottom
        right
        transition="scale-transition"
        origin="top left"
      >
        <template v-slot:activator="{ on }">
          <v-chip
            :color="getColor(item.AUTH)"
            class='white--text'
            v-on='on'
          >
            {{ getAuthName(item.AUTH) }}
          </v-chip>
        </template>
        <v-card width="300">
          <v-list>
            <v-list-item @click="allocateGroupAuth(item)">
              <v-list-item-action>
                <v-list-item-subtitle>切换只读用户/普通用户</v-list-item-subtitle>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-card>
      </v-menu>
    </template>
    <template v-slot:item.STATUS="{ item }">
      <v-chip
        color="accent"
        dark
      >
        {{ statusName }}
      </v-chip>
    </template>
    <template  v-slot:item.actions="{ item }">
      <v-menu
        v-model="item.deleteShow"
        v-if="item.AUTH!=='1001'"
        :close-on-content-click="false"
        :nudge-width="200"
        offset-x
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="primary"
            icon
            v-bind="attrs"
            v-on="on"
          >
            <v-icon
              middle
            >
              mdi-account-remove
            </v-icon>
          </v-btn>
        </template>
        <v-card>
          <v-card-title>
            踢出团队
          </v-card-title>
          <v-divider></v-divider>
          <v-card-text>
            确定将用户 <strong>{{item.NICK_NAME}}</strong> 踢出团队?
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              text
              @click="item.deleteShow = false"
            >
              取消
            </v-btn>
            <v-btn
              color="primary"
              text
              @click="deleteUser(item)"
            >
              确定
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </template>
    <template v-slot:no-data>
      无数据
    </template>
  </v-data-table>
</template>

<script>
  import groupApi from '@/api/apiPath/groupApi'

  export default {
    name: 'GroupUserTable',
    props: {
      user: {
        type: Array
      },
      groupId: {
        type: String
      }
    },
    data() {
      return {
        search: '',
        loading: true,
        menu: false,
        headers: [
          {
            text: '成员',
            align: 'start',
            sortable: true,
            value: 'NICK_NAME'
          },
          { text: '邮箱',sortable: true, value: 'EMAIL' },
          { text: '状态',sortable: true, value: 'STATUS' },
          { text: '权限',sortable: true, value: 'AUTH' },
          { text: '操作', value: 'actions', sortable: false }
        ]
      }
    },
    computed: {
      statusName: {
        get() {
          return '正常'
        }
      }
    },
    created() {
      this.user.forEach(item => {
        item.menuShow = false
        item.deleteShow = false
      })
    },
    methods: {
      getColor (auth) {
        if (auth === '1001' ) return 'primary'
        else if (auth === '1002') return 'secondary'
        else return 'quaternary'
      },
      getAuthName(auth) {
        if (auth === '1001' ) return '创建者'
        else if (auth === '1002') return '普通用户'
        else return '只读成员'
      },
      async allocateGroupAuth(item) {
        try {
          const { data: result } = await groupApi.allocateAuth({
            userId: item.USER_ID,
            groupId: this.groupId,
            auth: item.AUTH
          })
          this.$toast.success(result)
          this.$emit('freshList')
        } catch (e) {
          this.$toast.error(e)
        }
      },
      async deleteUser(item) {
        try {
          const { data: result } = await groupApi.deleteUser({
            userId: item.USER_ID,
            groupId: this.groupId
          })
          this.$toast.success(result)
          this.$emit('freshList')
        } catch (e) {
          this.$toast.error(e)
        }
      }
    }
  }
</script>

<style scoped>

</style>
